<template>
    <div id="Comprehensive">
        <el-card class="box-card">
       护士名称: <el-input class="change-button" v-model="name" placeholder="请输入查询名字" clearable />
       护士科室: <el-input class="change-button" v-model="department" placeholder="请输入科室" clearable />
       <el-button type="primary" class="elbutton" @click="find" style="{}">查询</el-button>
     <div class="lists">   <el-table :data="list" style="width: 100%">
            <el-table-column prop="name" label="护士姓名" width="180" />
            <el-table-column prop="department" label="所属科室" width="180" />
            <el-table-column prop="address" label="护士头像">
                <template #default="{ row }">
                    <img class="img" :src="row.head" alt="">
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系方式" width="180" />
            <el-table-column prop="sex" label="性别" width="180" />
            <el-table-column  label="操作" width="200" >
                  <template #default="{ row }">

                    <el-button type="primary" :icon="Edit"  @click="change(row)">
                            修改
                        </el-button>
                        <el-button type="warning" @click="changeDay(row)"  :icon="Star" >
                            排班
                        </el-button>
                  </template>
                     </el-table-column>
        </el-table>
    </div>
    <div class="tbas">
        <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[1, 50, 100, 200]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
    </div>
</el-card>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive,watchEffect,computed } from 'vue';
import {Edit,Star,} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'
import { useStore } from 'vuex';
import {useRouter} from 'vue-router'

const page = ref(1)
const size = ref(10)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const store=useStore()
const name=ref('')
const department=ref('')
const router=useRouter()
onMounted(() => {
  store.dispatch('jjy/A_nurseList',{page:page.value,size:size.value})
})
//每页多少数据
const handleSizeChange = (val: number) => {
    store.dispatch('jjy/A_nurseList',{page:page.value,size:size.value})
}
//第几页
const handleCurrentChange = (val: number) => {
    console.log(val);
    store.dispatch('jjy/A_nurseList',{page:page.value,size:size.value})
}
const list = computed(() => {
  return store.state.jjy.nurseList.data
})
const total = computed(() => {
  return store.state.jjy.nurseList.total
})
//查找
function find(){
    let data:any={page:page.value,size:size.value}
    // data[name.value]=name.value
    if(name.value) data.name=name.value
    if(department.value) data.sort=department.value
    store.dispatch('jjy/A_nurseList',data)
    ElMessage.success('查询成功')
}
//修改资料
function change(data){
    store.commit('jjy/M_nurse',data)
    console.log(data);
    router.push('/nurse/edit')
}
//修改排班
function changeDay(data){
   
    localStorage.setItem('id',data.id)
    router.push('/nurse/scheduling')
}
</script>

<style scoped lang="scss">
#Comprehensive{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.img{
    width: 30px;
    height: 30px;
}
.lists{
    max-height: 600px;
    overflow-y: scroll;
}
:deep .change-button{
width: 200px;
text-indent: 20px;
}
.elbutton{
    margin-left: 50px;
}
</style>